<template>
    <div class="app-container">
    <el-row>
      <el-col :span="17" class="card-box">
        <el-card>
          <video
            ref="videoElement"
            :src="videoUrl"
            id="videoElement"
            controls
            muted
            style="width: 100%; height: 100%; object-fit: fill"
          ></video>
          
        </el-card>
      </el-col>
      <el-col :span="7" class="card-box">
        <el-card>
          <div class="app-container">
            <el-table v-loading="loading" :data="sourceList" >
              <el-table-column label="设备名称" align="center"  prop="sourceName"   />
              <el-table-column label="识别类型" align="center" prop="identifyType"  >
                <template slot-scope="scope">
                    {{ dict.type.edge_device_identify.filter(item => item.value == scope.row.identifyType)[0].label }}
                </template>
              </el-table-column>
              <el-table-column label="启用标识" align="center" prop="enable" >
                  <template slot-scope="scope">
                    {{ dict.type.edge_device_enable.filter(item => item.value == scope.row.enable)[0].label }}
                  </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handlePreview(scope.row)"
                  >预览</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>   
</template>
<script>
import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/disposition/device"
import hlsjs from "hls.js";
export default {
  name: "About",
  dicts:['edge_device_enable','edge_device_identify'],
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备表格数据
      sourceList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //预览弹出层
      openPreview:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        terminalId: null,
        sourceId: null,
        sourceName: null,
        enable: null,
        streamUrl: null,
        type: null,
        interal: null,
        infer0Type: null,
        infer0Scorethreshold: null,
        infer0Nmsthreshold: null,
        infer1Type: null,
        infer1Scorethreshold: null,
        infer1Nmsthreshold: null,
        sinktype: null,
        sinkCode: null,
        lon: null,
        lat: null,
        altitude: null,
        configValue: null,
        time: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      //视频流地址
      videoUrl: "",//这里书写路径，例
    };
  },
  mounted() {
    this.getList();
    //获取edge_device_enable字典数据
       this.getDicts("edge_device_enable").then((res)=>{
        this.edgeDeviceEnable = res.data;
      });
      //获取edge_device_identify字典数据
        this.getDicts("edge_device_identify").then((res)=>{
        this.edgeDeviceIdentify = res.data;
      });
  },
  methods: {
     /** 查询设备列表 */
    getList() {
      this.loading = true;
      listDevice(this.queryParams).then(response => {
        this.sourceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 预览按钮操作 */
    handlePreview(row){
      this.videoUrl=row.ingestType
      setTimeout(() => {this.show();}, 50);
    },
    getLabel(list, id, value, label) {
      	if (id != '' && Array.isArray(list) && list.length != 0){
          return !list.find(item => item[value] == id) ? id : list.find(item => item[value] == id)[label]
        } else {
          return id
        }
    },
    //播放
    show() {
      this.video = this.$refs.videoElement; //定义挂载点
      console.log("this.video",this.video);
      if (hlsjs.isSupported()) {
        this.hlsjs = new hlsjs();
        this.hlsjs.loadSource(this.videoUrl);//设置播放路径
        this.hlsjs.attachMedia(this.video);//解析到video标签上
        console.log(this.hlsjs);
        this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log("加载成功");
        });
        this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
          // 监听出错事件
          console.log("加载失败");
        });
      } else {
        this.$message.error("不支持的格式");
        return;
      }
    },
    //停止播放
    closeVideo() {
      if (this.hlsjs) {
        this.$refs.videoElement.pause();
        this.video.pause();
        this.hlsjs.destroy();
        this.hlsjs = null;
        this.$emit("closeVideo");
      }
    },
  },
  computed: {},
  watch: {},
  filters: {},

};
</script>